<template>
  <div class="goodsPage">
    <el-table :data = 'currentData' style="width:100%">
        <el-table-column align = 'center' prop = 'id' label = '商品id'></el-table-column>
        <el-table-column align = 'center' prop = 'name' label = '商品名字'></el-table-column>
        <el-table-column align = 'center' prop = 'stock' label = '商品数量'></el-table-column>
        <el-table-column align = 'center' prop = 'describe' label = '商品描述'></el-table-column>
        <el-table-column align = 'center' prop = 'price' label = '商品价格'></el-table-column>
        <el-table-column align = 'center' label = '操作'>
             <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="seeDetail(scope.$index, scope.row)">查看详情</el-button>
            </template>
        </el-table-column> 
        </el-table>
        <el-pagination layout="prev, pager, next" :total="allData.length" background :page-size = 'row' :pager-count = '5'
         @current-change = 'changePage' v-show="!allData.length == 0">
        </el-pagination>
  </div>
</template>
<script>

export default {
  name: 'vuexTest',
  data(){
    return{
      // 总数据
      allData:[],
      // 每页显示几条数据
      row:3,
      // 当前页
      currentPage:1,

    }
  },
  computed:{
      currentData(){
        let data = [];
        data = this.allData.slice((this.currentPage-1)*this.row,this.currentPage*this.row);
        return data;
      }
  },
  methods:{
    changePage(num){
       this.currentPage = num;
    },
    seeDetail(index,row){
      const id = row.id;
      this.$router.push({name:'goodsDetail',params:{id}});
    }
  },
  created(){
    this.$store.dispatch('getGoodsData').
    then(()=>{

      this.allData = this.$store.state.goodsStore.goodsData.data;
    });       
  }
}
</script>
